<template>
  <div>
    <header>
      <span class="title">用户管理系统 - <span style="font-size: 30px; color: rgb(105, 55, 163);">{{ getTitle() }}</span></span>

      <UserDropList class="user-drop-list rightFloat" :user="this.currentUser" v-if="this.currentUser">
        <UserDropItem @click="this.$router.push('/user/info')"  title="个人信息" />
        <UserDropItem @click="deleteUser()" title="用户注销" />
        <UserDropItem @click="this.$router.push('/user/change')" title="修改密码" />
        <UserDropItem :disabled="this.currentUser?.userType != 1" @click="toSearch()" title="用户信息查询" />
        <UserDropItem :disabled="this.currentUser?.userType != 1" @click="this.$router.push('/user/sql')" title="SQL查询" />
        <UserDropItem :disabled="this.currentUser?.userType != 1" @click="this.$router.push('/user/origin')" title="数据源管理" />
        <UserDropItem :disabled="this.currentUser?.userType != 1" @click="this.$router.push('/user/data')" title="数据查询" />
        <UserDropItem @click="this.$router.push('/login')" title="退出登录" />
      </UserDropList>
    </header>

    <div class="container" v-if="this.currentUser">
      <RouterView :users="users" :user="this.currentUser"/>
    </div>
    <div class="container" v-if="!this.currentUser" style="font-size: 25px;text-align: center;">
      ERROR：您还未<RouterLink to="/login">登录</RouterLink>！
    </div>

  </div>
</template>

<script>
import UserDropList from './UserDropList.vue';
import UserDropItem from './UserDropItem.vue';
import request from '../utils/request'



export default {
  name: 'UserPage',
  components:{
    UserDropList,
    UserDropItem,
  },
  computed:{
    currentUser(){
      return this.$store.getters.currentUser
    }
  },
  methods:
  {
    //通过路由获取页面标题
    getTitle(){
      switch (this.$route.path) {
        case '/user/info':
          return '个人信息'
        case '/user/search':
          return '用户信息查询'
        case '/user/change':
          return '修改密码'
        case '/user/sql':
          return 'Sql查询'
        case '/user/origin':
          return '数据源管理'
        case '/user/data':
          return '数据查询'
      
        default:
          break;
      }
      return 1 
    },
    toSearch() {
      if(this.currentUser.userType != 1)
        return

      this.$router.push("/user/search")
    },
    deleteUser(){
      if(!confirm("注销后此账号所有数据将被删除，需重新注册，您确定要注销账号？"))
        return
      request.delete("/api/start/delete/"+ this.currentUser?.userid).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '成功注销',
            type: 'success'
          });
          this.$router.push('/login')
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    logOut(){
      /* 退出登录改为离线状态 */
      request.post("/api/start/edit/state", {userState: 1, userid: this.currentUser?.userid}).then(
        res => {
          if (res.code === '0') {
            this.$message({
              message: '账号已退出',
              type: 'success'
            });
            this.$router.push('/login')
            this.$store.dispatch('logOut')

            localStorage.removeItem('currentUser')

          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        },
        error =>{ 
          console.log(error.message); 
        }
      )
    },
    //更新数据
    updateUserInfo(){
      request.post('/api/start/update', this.currentUser).then(
        response => { 
          if(response.code == 0){
            this.$message({
              message: "数据已更新",
              type: 'success'
            })
            this.saveDataToCookie(response.data)
            this.$store.state.currentUser_save = response.data
          }
          else {
            console.log(response.data);
            localStorage.removeItem('currentUser')
          }
        },
        error => { 
          console.log(error.message); 
          localStorage.removeItem('currentUser')
        }
      )
    },
    saveDataToCookie(data){
      localStorage.setItem('currentUser', JSON.stringify(data))
    }
  },
  beforeUnmount(){
    //返回退出登录
    if(this.currentUser)
      this.logOut()
  },
  mounted(){
    //刷新更新数据
    if(this.currentUser){
      this.updateUserInfo()
    }
    window.addEventListener("beforeunload",()=>{
      this.saveDataToCookie(this.currentUser)
    })
      
  }
}

</script>

<style scoped>
header {
  background-color: rgb(115, 129, 253);
  height: 100px;
  border-bottom: 5px solid rgb(0, 47, 255);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 2;
}

.title {
  font-size: 40px;
  padding-top: 20px;
  font-weight: bold;
  color: rgb(0, 0, 70);
  font-style: italic;
  line-height: 120px;
  padding-left: 20px;
}

header .user-drop-list {
  position: absolute;
  right: 20px;
  top: -20px;
  left: auto;
}

.container {
  background-color: rgba(255, 255, 255, 0.5);
  min-height:100vh;
  padding: 30px;
  box-sizing: border-box;
}

.searchArea {
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.btns {
  margin-top: 15px;
}

table {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  width: 1380px;
  background-color: rgb(199, 199, 199);
  border-radius: 10px;
  border-collapse: collapse;
}

tbody tr:nth-child(2n+1) {
  background-color: rgb(228, 228, 228);
}
tbody tr:hover {
  background-color: rgb(255, 255, 255);
}

tr {
  height: 50px;
}

tr td {
  padding-left: 10px;
}

thead {
  font-weight: bold;
}
</style>
